<template>
    <main class="container mx-auto px-4 py-8">
        <div class="flex flex-col gap-20 lg:flex-row">
            <!-- 电影海报 -->
            <div class="lg:w-1/3">
                <div class="overflow-hidden rounded-lg shadow-xl">
                    <img src="http://localhost:3000/images/m1.jpg" alt="让子弹飞海报" class="h-auto w-full" />
                </div>
                <div class="mt-4 flex flex-wrap gap-2">
                    <span class="rounded-full bg-gray-300 px-3 py-1 text-sm">动作</span>
                    <span class="rounded-full bg-gray-300 px-3 py-1 text-sm">喜剧</span>
                    <span class="rounded-full bg-gray-300 px-3 py-1 text-sm">犯罪</span>
                </div>
                <div class="mt-6 flex items-center justify-between">
                    <div class="flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-yellow-400"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                            />
                        </svg>
                        <span class="ml-1 text-lg font-bold">8.9</span>
                        <span class="ml-1 text-gray-400">/10</span>
                    </div>
            
                </div>
            </div>

            <!-- 电影信息 -->
            <div class="lg:w-2/3">
                <h1 class="mb-12 text-3xl font-bold md:text-4xl">{{ movieDetail.title }}</h1>

                <!-- 基本信息 -->
                <div class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">基本信息</h2>
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <p><strong class="text-gray-400">导演:</strong> {{ movieDetail.director }}</p>
                            <p><strong class="text-gray-400">主演:</strong> {{ movieDetail.actors }}</p>
                            <p><strong class="text-gray-400">类型:</strong> {{ movieDetail.type }}</p>
                        </div>
                        <div>
                            <p><strong class="text-gray-400">上映日期:</strong> {{ movieDetail.releaseDate }}</p>
                            <p><strong class="text-gray-400">国家/地区:</strong> {{ movieDetail.area }}</p>
                            <p><strong class="text-gray-400">语言:</strong> {{ movieDetail.language }}</p>
                            <p><strong class="text-gray-400">片长:</strong> {{ movieDetail.duration }}</p>
                        </div>
                    </div>
                </div>

                <!-- 剧情简介 -->
                <div class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">剧情简介</h2>
                    <div class="space-y-4">
                        <p v-for="(item, index) in movieDetail.summary" :key="index">{{ item }}</p>
                    </div>
                </div>

                <!-- 演职员表 -->
                <div class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">演职员表</h2>
                    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
                        <div class="text-center" v-for="(item, index) in movieDetail.casts" :key="index">
                            <div class="mx-auto mb-2 h-24 w-24 overflow-hidden rounded-full">
                                <img
                                    :src="item.avatar"
                                    alt="姜文"
                                    class="h-full w-full object-cover object-[center_20%]"
                                />
                            </div>
                            <p class="font-medium">{{ item.name }}</p>
                            <p class="text-sm text-gray-400">{{ item.role }}</p>
                        </div>
                    </div>
                </div>

                <!-- 预告片 -->
                <div class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">预告片</h2>
                    <div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-lg bg-black">
                        <!-- <video controls class="w-full" poster="">
                            <source :src="movieDetail.trailer" type="video/mp4" />
                            您的浏览器不支持视频播放。
                        </video> -->
                        <video :src="movieDetail.trailer" class="w-full" controls autoplay></video>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<script setup lang="ts">
import { getListOneDetailAPI } from "@/api/list";

const route = useRoute();
const id = route.query.id;

const movieDetail = ref<any>({});

const getList = async () => {
    const res = await getListOneDetailAPI(id as string);
    movieDetail.value = res[0];
};

onMounted(() => {
    getList();
});
</script>

<style scoped lang="scss"></style>
